<script setup>
import { reactive, ref, watch } from 'vue'
import { displayLoading } from '@/utils/loading.js'
import { deleteBrand, listBrand } from '@/service/brand.js'
import BrandDialog from '@/pages/BrandPage/component/BrandDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteShortDatedProductById } from '@/service/shortDatedProduct.js'
const totalCount = ref(0)
const brandDialogRef = ref()
const searchForm = reactive({
  brandName: null,
  page: 1,
  pageSize: 10,
})
const type = ref('add')
watch(
  searchForm,
  () => {
    loadData()
  },
  { immediate: true }
)

function clearQueryParam() {
  if (!searchForm.brandName && searchForm.page === 1 && searchForm.pageSize === 10) {
    loadData()
  } else {
    Object.assign(searchForm, {
      brandName: null,
      page: 1,
      pageSize: 10,
    })
  }
}
const brandList = ref([])

function addNewBrand() {
  type.value = 'add'
  Object.assign(brandDialogRef.value.brandForm, {
    id: null,
    brandName: '',
    brandProfile: '',
    brandWeight: 10,
    brandImage: null,
  })
  brandDialogRef.value.showModal = true
}
async function loadData() {
  const res = await displayLoading(() => listBrand(searchForm.brandName, searchForm.page, searchForm.pageSize))
  totalCount.value = res.data.total
  brandList.value = res.data.records
  console.log(res)
}
function onTapEditButton(row) {
  type.value = 'edit'
  Object.assign(brandDialogRef.value.brandForm, {
    id: row.id,
    brandName: row.brandName,
    brandProfile: row.brandProfile,
    brandWeight: row.brandWeight,
    brandImage: row.brandImage,
  })
  brandDialogRef.value.showModal = true
}

function onTapDeleteButton(row) {
  console.log(row)
  ElMessageBox.confirm(`确定删除品牌：<span style="color: red">${row.brandName}</span>?`, '信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true, // 允许内容使用 HTML 字符串
  })
    .then(async () => {
      await deleteBrand(row.id)
      ElMessage({
        type: 'success',
        message: '成功删除品牌',
      })
      await loadData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<template>
  <div class="brand-page">
    <el-form :model="searchForm" inline label-position="right" label-width="auto" style="margin-top: 10px">
      <el-form-item label="品牌名称:" style="width: 100%">
        <div style="display: flex; align-items: center; width: 100%">
          <el-input v-model="searchForm.brandName" placeholder="请输入品牌名称" style="width: 300px"></el-input>
          <el-button style="margin-left: 10px" type="info" @click="clearQueryParam">清空查询</el-button>
          <el-button style="margin-left: auto" type="primary" @click="addNewBrand">新增品牌</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table
      :data="brandList"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      border
      style="width: 100%"
    >
      <el-table-column align="center" label="品牌编号" width="100">
        <template #default="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="品牌名称" width="150">
        <template #default="scope">
          {{ scope.row.brandName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="品牌图片" width="100">
        <template #default="scope">
          <el-image :src="scope.row.brandImage" style="width: 60px; height: 60px"></el-image>
        </template>
      </el-table-column>
      <el-table-column header-align="center" label="品牌描述" width="480">
        <template #default="scope">
          <span class="text-ellipsis">
            {{ scope.row.brandProfile }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="175">
        <template #default="scope">
          <span> {{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间" width="175">
        <template #default="scope">
          <span> {{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="175">
        <template #default="scope">
          <el-button type="primary" @click="onTapEditButton(scope.row)">编辑</el-button>
          <el-button type="danger" @click="onTapDeleteButton(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="searchForm.page"
      v-model:page-size="searchForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 10px"
    />
  </div>
  <BrandDialog ref="brandDialogRef" :type="type" @update="loadData" />
</template>

<style lang="scss" scoped>
.brand-page {
  padding: 24px;
  background-color: #fff;
}
.text-ellipsis {
  font-size: 12px;
  display: -webkit-box; /* 弹性盒模型，用于多行文本截断 */
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  -webkit-box-orient: vertical; /* 文本垂直排列 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
</style>
